<template>
<div>
    <h1>操作人员添加</h1>
    <el-form :model="admin" label-width="120px">
        <el-form-item label="姓名">
            <el-input v-model="admin.adminname" placeholder="*必填" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="admin.password" placeholder="*必填" />
        </el-form-item>
        <el-form-item label="角色">
            <el-radio-group v-model="admin.role">
                <el-radio :label="1">超级管理员</el-radio>
                <el-radio :label="2">普通管理员</el-radio>
            </el-radio-group>
        </el-form-item>
        <p>
          <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" hightlight-current />
        </p>
        <el-form-item>
            <el-button type="primary" @click="addAdmin">添加</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
    
<script setup lang="ts">

//在setup函数里（setup语法糖里），如果想使用路由对象。
import { ElMessage } from "element-plus"
import { reactive,ref } from "vue"
import {useRouter} from "vue-router";
import service from "../../../utils/service"
import {menudata as data} from "../../../grants/menudata"
import "element-plus/dist/index.css";

const $router = useRouter()

interface IAdmin{
  "adminname":string,
  "password":string,
  "role":number,//1:超管 2：普通管理员
  "checkedKeys":string[]
}

//当前管理员的数据
const admin = reactive<IAdmin>({
  "adminname":"",
  "password":"",
  "role":1,//1:超管 2：普通管理员
  "checkedKeys":[]
})

let treeRef = ref<any>(null)

//添加功能
const addAdmin=()=>{

  let arr = treeRef.value!.getCheckedKeys()

  let halfArr = treeRef.value!.getHalfCheckedKeys()

  arr = arr.concat(halfArr)

  // let arr = treeRef.value.getCheckedKeys()

  // console.log("arr",arr);
  
  admin.checkedKeys = arr

  if(admin.adminname === "" || admin.password === ""){
    ElMessage({
      message:"请输入姓名和密码！",
      type:"error"
    })
  }else(
    service({
      url:"/admin/add",
      method:"post",
      data:admin
    }).then(res=>{
      if(res.data.code === "10008"){
        // console.log(res.data.message);
        ElMessage({
          message:"管理员长度不能大于6!",
          type:"error"
        })
        
      }else if(res.data.code === "200"){
        ElMessage({
          message:"恭喜添加成功！",
          type:"success"
  
        })
         $router.push("/Admin/AdminList");
      }
    })

  )
}
</script>
    
<style scoped>
.el-input{
  width: 300px;
}
.el-tree{
  margin-left: 70px;
  width: 350px;
}
.el-button{
  margin-top: 20px;
  margin-left: 70px;
}
</style>